[V0_FILE]typescriptreact:file="app/page.tsx" import Hero from "./components/hero" import Gallery from "./components/gallery" import Portfolio from "./components/portfolio" import Contact from "./components/contact" import Footer from "./components/footer" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/components/hero.tsx" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" export default function Hero() { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return canvas.width = window.innerWidth canvas.height = window.innerHeight const particles: Particle[] = [] const particleCount = 100 class Particle { x: number y: number size: number speedX: number speedY: number constructor() { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.size = Math.random() * 2 + 0.1 this.speedX = Math.random() * 2 - 1 this.speedY = Math.random() * 2 - 1 } update() { this.x += this.speedX this.y += this.speedY if (this.x > canvas.width) this.x = 0 if (this.x < 0) this.x = canvas.width if (this.y > canvas.height) this.y = 0 if (this.y < 0) this.y = canvas.height } draw() { if (!ctx) return ctx.fillStyle = "rgba(255, 255, 255, 0.5)" ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fill() } } for (let i = 0; i < particleCount; i++) { particles.push(new Particle()) } function animate() { if (!ctx) return ctx.clearRect(0, 0, canvas.width, canvas.height) for (const particle of particles) { particle.update() particle.draw() } requestAnimationFrame(animate) } animate() const handleResize = () => { if (!canvasRef.current) return canvasRef.current.width = window.innerWidth canvasRef.current.height = window.innerHeight } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return (

) } [V0_FILE]typescriptreact:file="app/components/gallery.tsx" "use client" import { motion } from "framer-motion" import { useRef } from "react" import { useInView } from "framer-motion" export default function Gallery() { const ref = useRef(null) const isInView = useInView(ref, { once: true }) const images = [ { src: "/placeholder.svg?height=600&width=400", alt: "Art piece 1", title: "Ethereal Dreams", }, { src: "/placeholder.svg?height=600&width=400", alt: "Art piece 2", title: "Urban Symphony", }, { src: "/placeholder.svg?height=600&width=400", alt: "Art piece 3", title: "Digital Nostalgia", }, { src: "/placeholder.svg?height=600&width=400", alt: "Art piece 4", title: "Abstract Reality", }, ] return (

Featured Works

{images.map((image, index) => (

{image.title}

))}

) } [V0_FILE]typescriptreact:file="app/components/portfolio.tsx" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" export default function Portfolio() { const [selectedCategory, setSelectedCategory] = useState("all") const categories = ["all", "digital", "paintings", "sculptures"] const works = [ { id: 1, title: "Digital Dreamscape", category: "digital", image: "/placeholder.svg?height=400&width=600", year: "2024", }, { id: 2, title: "Abstract Harmony", category: "paintings", image: "/placeholder.svg?height=400&width=600", year: "2023", }, { id: 3, title: "Metal Flow", category: "sculptures", image: "/placeholder.svg?height=400&width=600", year: "2024", }, { id: 4, title: "Neon Nights", category: "digital", image: "/placeholder.svg?height=400&width=600", year: "2023", }, { id: 5, title: "Nature's Whisper", category: "paintings", image: "/placeholder.svg?height=400&width=600", year: "2024", }, { id: 6, title: "Bronze Echo", category: "sculptures", image: "/placeholder.svg?height=400&width=600", year: "2023", }, ] const filteredWorks = works.filter((work) => (selectedCategory === "all" ? true : work.category === selectedCategory)) return (

{categories.map((category) => ( ))}

{filteredWorks.map((work) => (

{work.title}

{work.year}

))}

) } [V0_FILE]typescriptreact:file="app/components/contact.tsx" "use client" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" const formSchema = z.object({ name: z.string().min(2, { message: "Name must be at least 2 characters.", }), email: z.string().email({ message: "Please enter a valid email address.", }), message: z.string().min(10, { message: "Message must be at least 10 characters.", }), }) export default function Contact() { const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { name: "", email: "", message: "", }, }) function onSubmit(values: z.infer) { console.log(values) } return (

Get in Touch

Interested in collaborating or commissioning a piece? Let's create something amazing together.

( Name )} /> ( Email )} /> ( Message

</FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <Button type="submit" className="w-full">
                Send Message
              </Button>
            </form>
          </Form>
        </motion.div>
      </div>
      <div className="absolute inset-0 z-0 opacity-30">
        <svg className="h-full w-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          {Array.from({ length: 50 }).map((_, i) => (
            <line key={i} x1={i * 2} y1="0" x2={i * 2} y2="100" stroke="white" strokeWidth="0.1" />
          ))}
        </svg>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="app/components/footer.tsx"
export default function Footer() {
  return (
    <footer className="border-t border-zinc-800 bg-black py-8">
      <div className="container mx-auto px-4">
        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
          <p className="text-sm text-gray-400">© {new Date().getFullYear()} Jane Doe. All rights reserved.</p>
          <div className="flex gap-6">
            <a href="#" className="text-gray-400 hover:text-white">
              Instagram
            </a>
            <a href="#" className="text-gray-400 hover:text-white">
              Twitter
            </a>
            <a href="#" className="text-gray-400 hover:text-white">
              LinkedIn
            </a>
          </div>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true"
import "@/styles/globals.css"
import { Inter } from "next/font/google"
import type React from "react" // Import React

const inter = Inter({ subsets: ["latin"] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

[V0_FILE]css:file="styles/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

--card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

--popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

--primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

--secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

--muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

--accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

--card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

--primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

--secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

--muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

--accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This